import { Canvas, Story, Meta } from "@storybook/blocks";
import { Icon } from "metabase/ui";
import { DateInput, Stack } from "metabase/ui";
import * as DateInputStories from "./DateInput.stories";

<Meta of={DateInputStories} />

# DateInput

Our themed wrapper around [Mantine DateInput](https://v6.mantine.dev/dates/date-input/).

## Docs

- [Figma File](https://www.figma.com/file/oIZhYS5OoRA7twd4KqN4Eu/Input-%2F-Text?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
- [Mantine DateInput Docs](https://v6.mantine.dev/dates/date-input/)

## Examples

<Canvas of={DateInputStories.Default} />

### Size - md

<Canvas of={DateInputStories.EmptyMd} />

#### Filled

<Canvas of={DateInputStories.FilledMd} />

#### Asterisk

<Canvas of={DateInputStories.AsteriskMd} />

#### Description

<Canvas of={DateInputStories.DescriptionMd} />

#### Disabled

<Canvas of={DateInputStories.DisabledMd} />

#### Error

<Canvas of={DateInputStories.ErrorMd} />

#### Icon

<Canvas of={DateInputStories.IconMd} />

#### Read only

<Canvas of={DateInputStories.ReadOnlyMd} />

#### No popover

<Canvas of={DateInputStories.NoPopoverMd} />

### Size - xs

<Canvas of={DateInputStories.EmptyXs} />

#### Filled

<Canvas of={DateInputStories.FilledXs} />

#### Asterisk

<Canvas of={DateInputStories.AsteriskXs} />

#### Description

<Canvas of={DateInputStories.DescriptionXs} />

#### Disabled

<Canvas of={DateInputStories.DisabledXs} />

#### Error

<Canvas of={DateInputStories.ErrorXs} />

#### Icon

<Canvas of={DateInputStories.IconXs} />

#### Read only

<Canvas of={DateInputStories.ReadOnlyXs} />

#### No popover

<Canvas of={DateInputStories.NoPopoverXs} />
